<template>
  <!--  -->
  <!-- 文件预览：docx文档预览（不能够读取doc文件） -->
  <!--  -->
  
  <div class="doc-content" ref="docRef"></div>

</template>

<script setup>
import * as docx from "docx-preview";   //docx插件，依赖下载在package.json第18行
import { ref, reactive, getCurrentInstance, onMounted, computed, onUnmounted } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
    url: {
        type: String,
    },
});

const docRef = ref();

//docx文件预览器（不能够读取doc文件）
const initDoc = async () => {
    let result = await proxy.Request({
        url: props.url,
        responseType: "blob",   //响应数据以流的形式返回，不是json
    });
    if (!result) {
        return;
    }
    docx.renderAsync(result, docRef.value);
};


//在Vue3 中,onMounted 是一个生命周期钩子函数,用于在组件渲染后执行（在<script>标签头部引入）
onMounted(() => {
    initDoc();
})

</script>

<style lang="scss" scoped>
.doc-content {
    margin: 0px auto;
    :depp .docx-wrapper {
        background: #fff;
        padding: 10px 0px;
    }

    :depp .docx-wrapper > section.docx {
        margin-bottom: 0px;
    }
}

</style>